<template>
    <div class="jx-content">
		<div style="clear:both"></div>
            <div class="systemList-course">
               <div class='systemLeft fl'>
                    <div class="navBoxs">
                        <span class="reportTemplate" >系统课程</span>
                    </div>
                    <div >
                        <div class="transfer-left blocks">
                            <div class="transfer-main ">
                                <div v-for=" item in fromData"  :key="item.id" >
                                    <div class="checkboxlist">
                                        <el-checkbox-group v-model="checkList"  >
                                            <el-checkbox  :label="item.id" :key="item.id"><img src="../../../assets/images/iconfile.png"/> <span class="hoverCalss">{{item.name}}</span></el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>
                            </div>
                        </div>
			        </div>
                </div>
                <div class='systemMiddle fl'>
                   <i class="iconfont icon-xiangyou1"></i>
                </div>
                <div class='systemRight fl'>
                    <div class="navBoxs">
                        <span class="reportTemplate"  v-for="(item,index) in tab" :key="index"   @click="tabFn(item, index)" :class="{templateCheck:tabActive==index}">{{item.keyValue}}</span>
                    </div>
					 <!-- 本科 -->
					 
                     <div  v-show="tabActive == 0">
						<div class="transfer-right blocks" >
							<div v-if="!addressee.length" class="emptylist">
								<img src="../../../assets/images/index_no_data.png"/>
								<p>暂无内容</p>
								<p>点击右下角按钮快去添加~</p>
							</div>
							
							<div v-else>
								<div  class="transfer-right-item"  v-for="(item, index) in addressee" :key="index">
									<p class="transfer-title" @click="moveUp(item)">
										<img src="../../../assets/images/filescourse.png" class="filescourse"/>
										<span v-if="!fromDisabled" class="titleIcon"> {{ item.name }}</span>
										<span v-if="fromDisabled" class="titleIcon" > {{ item.name }}</span>
										<span  class="transfer-center-item "  @click.stop="addressListTransfer(item,index)">
											<el-button  type="primary"  circle  :disabled="fromDisabled">加入</el-button>
										</span>
										<span @click.stop="downLoad(item,tabActive)">
											<el-button  type="primary"  circle  style="margin-left:0px" v-if="item.children.length>0" >下载</el-button>
										</span>
										<i class="iconfont icon-xiala-copy move_up_img "  v-if="item.move_up " v-show="item.children != '' && item.children" ></i>
										<i class="iconfont icon-shouqi move_up_img "  v-if="!item.move_up" v-show="item.children != '' && item.children"  ></i>
									</p>
									<!-- 内容区 -->
									<el-collapse-transition>
										<div class="transfer-main"  v-if="!item.move_up">
											<ul class="address-list-ul block">
												<li  class="address-list-li list-group-item" v-for="(item2, index2) in item.children" :key="index2">
													<img src="../../../assets/images/iconfile.png" v-if="item.children.length>0"/>
													<label>
														{{item2.name}}
													</label>
													<i class=" iconfont icon-Group- address-list-del" @click="clearList(item2, item2.id,item)"></i>
												</li>
											</ul>
										</div>
									</el-collapse-transition>
								</div>
							</div>
						</div>
						<span class="edit">
							<i class="iconfont icon-icon_edit" @click="editStudy('1')"></i>
				  		</span>
				    </div>

                    <!-- 专科 -->
                    <div v-show="tabActive == 1">
						<div class="transfer-right blocks" >
							<div v-if="!workList.length" class="emptylist">
								<img src="../../../assets/images/index_no_data.png"/>
								<p>暂无内容</p>
								<p>点击右下角按钮快去添加~</p>
							</div>
							<div v-else>
								<div  class="transfer-right-item"  v-for="(item, index) in workList" :key="index">
									<p class="transfer-title"  @click="moveUpWork(item)">
										<img src="../../../assets/images/filescourse.png" class="filescourse"/>
										<span v-if="!fromDisabled" class="titleIcon">{{ item.name }}</span>
										<span v-if="fromDisabled" class="titleIcon">{{ item.name }}</span>
										<span  class="transfer-center-item" >
											<el-button  type="primary" @click.stop="addressListTransfer2(item,index)" class="address-first-btn"  circle  :disabled="fromDisabled"
											>加入</el-button>
										</span>
										<span @click.stop="downLoad(item,tabActive)">
											<el-button  type="primary"  circle  style="margin-left:0px" v-if="item.children.length>0" >下载</el-button>
										</span>
										<i class="iconfont icon-xiala-copy move_up_img" v-if="item.move_up"  v-show="item.children != '' && item.children"></i>
										<i class="iconfont  icon-shouqi move_up_img" v-if="!item.move_up " v-show="item.children != '' && item.children" ></i>
									</p>
									<!-- 内容区 -->
									<el-collapse-transition>
										<div class="transfer-main"  v-if="!item.move_up" >
											<ul class="address-list-ul block">
												<li  class="address-list-li list-group-item" v-for="(item2, index2) in item.children"  :key="index2">
													<img src="../../../assets/images/iconfile.png" v-if="item.children.length>0"/>
													<label>
														{{item2.name}}
													</label>
													<i class="iconfont icon-Group- address-list-del" @click="clearList2(item2, item2.id,item)"></i>
												</li>
											</ul>
										</div>
									</el-collapse-transition>
								</div>
							</div>
						</div>
						<span class="edit">
							<i class="iconfont icon-icon_edit" @click="editCollege('2')"></i>
						</span>
					</div>
               </div>
            </div>
            <div class="save">
                <button class="button-style" @click="saveAll" >保 存</button>
            </div>
			<dialogCompont :show="show" :num="num"  :types ='types' :title="title" :listData='listData'  @close='close'  @closeBind="handleCloseBindWarn"></dialogCompont>
		
    </div>
</template>

<script>
    import dialogCompont from '@/components/dialogCompont'
    export default {
        components: {
			dialogCompont
        },
        data() {
            return {
                //系统课程数据
                fromData:'',
                //系统课程
                checkList:[],
                //判断是否是当前那个
				todoEdie:'',
				//弹窗
				//tab切换
                tabActive:0,
                // 本科课程
				addressee: [],
				//专科课程
                workList:[],
                fromDisabled: true, // 添加按钮是否禁用
                //弹窗组件配置信息
				title: '',
				show: false,
                num:'', 
                //本科弹窗数据
				listData:[],
				//专科数据
				skillData:[],
                //tab数据
				tab:[],
				tabFrist:'',
				tabSecond:'',
				//专科/本值
				types:'',
				
            }
        },
        created(){
			this.tabText()
			this.init()
        },
        watch:{
            checkList(val){
				if (val.length > 0) {
				// 穿梭按钮是否禁用
					this.fromDisabled = false;
				} else {
					this.fromDisabled = true;
				}
			},
        },
        methods:{
			//新加下载
			downLoad(item,tabActive){
				let self = this
				let str;
				tabActive == 0?str = '本科-' :str = '专科-'
                self.$http.post('/tes/direction/'+item.id+'/download',{
                    
                },{responseType: 'blob'}) .then((response) => {
					if(response.status == 200){
						let blob = new Blob([response.data], {type: response.headers['content-disposition']});
						let fileName = str + item.name+'.xls'
						let url = window.URL.createObjectURL(blob);
						let downloadElement = document.createElement('a');
						downloadElement.style.display = 'none';
						downloadElement.href = url;
						downloadElement.download = fileName; //下载后文件名
						document.body.appendChild(downloadElement);
						downloadElement.click(); //点击下载
						document.body.removeChild(downloadElement); //下载完成移除元素
						window.URL.revokeObjectURL(url);
					}else{
						self.$message.error(response.data.message)
					}
					
                   
                }).catch(err => {
                      self.$message.error(response.data.message)
                })
			},
            //初始化页面数据
			init(){
				let self = this
                self.$http.get('/tes/course/preset').then(response => {
                    let res = response.data
                    if(res.code == '200') {
						self.fromData = res.data

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
			},
			//获取tab数据
			tabText(){
				let self = this
                self.$http.get('/tes/unauthorized/config?keys=schoolType').then(response => {
                    let res = response.data
                    if(res.code == '200') {
					   self.tab = res.data.schoolType
					   //获取专科或者本科id值
					   self.tabFrist = self.tab[0].id
					   self.tabSecond = self.tab[1].id
					   self.getData(self.tabFrist)
					    self.getData(self.tabSecond)
                    }else{
                        self.$message.error('系统未配置本科或专科课程')
                    }
                }).catch(err => {
                     console.log(err)
                })
			},
            //右侧切换
            tabFn(item, index){
				this.tabActive = index
				this.listData =[]
				this.skillData =[]
				this.saveAll2()
                //获取专家 本数据
                this.getData(item.id)
            },
            //typeId  是专科/本科的id
            getData(typeId){
				let self = this
                self.$http.get('/tes/direction/list?type='+typeId).then(response => {
                    let res = response.data
                    if(res.code == '200') {
					   //本科
					    if( typeId == self.tabFrist){
							if(res.data.length > 0  && res.data != undefined){
								for(let i =0; i<res.data.length; i++){
									self.$set(res.data[i],'move_up',true)
									//本科弹窗数据
									self.listData.push({id:res.data[i].id,name:res.data[i].name})
								}
								self.addressee = res.data
							}else{
								self.addressee = []
							}	
					    }else if(typeId == self.tabSecond){
							if(res.data.length > 0  && res.data != undefined){
								for(let i =0; i<res.data.length; i++){
									self.$set(res.data[i],'move_up',true)
									//专科弹窗数据
									self.skillData.push({id:res.data[i].id,name:res.data[i].name})
								}
								self.workList = res.data	
							}else{
								self.workList = []
							}
						}
					    
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
            },
            //本科/或专科 伸缩 公共方发
			UPDownFn(list,item){
				if(item.move_up){
					for(let i=0; i<list.length; i++){
						list[i].move_up = true	
					}
					item.move_up = !item.move_up
				}else{
					item.move_up = !item.move_up
				}
            },
            //本科
            moveUp(item){
                this.UPDownFn(this.addressee,item)
            },
            //专科
            moveUpWork(item){
                this.UPDownFn(this.workList,item)
            },
            //加入公共方法
            //list 表示是专科/本科数据
            AddFn(item,index,list){
                let self = this
				//左侧数据删除
				 if(!this.fromDisabled){
					 for(let i=0; i < list.length; i++){
						list[i].move_up = true	
					}
					item.move_up = false
				}

				let arr =[]
				let arr2 =[]
				let childrens =[]
				for(let k=0; k < this.fromData.length; k++){
					for(let i=0; i < this.checkList.length; i++){
						if( this.fromData[k].id == this.checkList[i]){
							arr.push(this.fromData[k])
						}
					}
				}
			
				for(let m =0; m < arr.length; m++){
					//如果新建的没有子集children
					if(list[index].children == undefined){
						list[index].children = childrens
					}
				}
				
				//新加功能是为了去掉左侧的重复id
				list[index].children = this.isModify(arr,list[index].children)
				this.checkList = []
            },
            //删除的公共方法
            //list 表示本科还是专科
            clearLFn(item, id, items,list){
                let self = this
				for(let k =0; k < items.children.length; k++){
					if(items.children[k].id == item.id ){
						//删除
					}
				}
				for(var i=0; i < list.length; i++){
					for(let k = 0; k< items.children.length; k++){
						if(items.children[k].id == item.id){
							items.children.splice(k,1)
						}
					}
                }
                this.$forceUpdate()
            },
            //本科加入
            addressListTransfer(item,index){
                this.AddFn(item,index,this.addressee)
                // let self = this
				// //左侧数据删除
				//  if(!this.fromDisabled){
				// 	 for(let i=0; i < this.addressee.length; i++){
				// 		this.addressee[i].move_up = true	
				// 	}
				// 	item.move_up = false
				// }
				// let arr =[]
				// let arr2 =[]
				// let childrens =[]
				// for(let k=0; k < this.fromData.length; k++){
				// 	for(let i=0; i < this.checkList.length; i++){
				// 		if( this.fromData[k].id == this.checkList[i]){
				// 			arr.push(this.fromData[k])
				// 		}
				// 	}
				// }
				// for(let m =0; m < arr.length; m++){
				// 	//如果新建的没有子集children
				// 	if(this.addressee[index].courseList == undefined){
				// 		this.addressee[index].courseList = childrens
				// 	}
				// }
				// //新加功能是为了去掉左侧的重复id
				// this.addressee[index].courseList = this.isModify(arr,this.addressee[index].courseList)
				// this.checkList = []
            },
            //判断两个数组是否是重复
			isModify (arr2,brr) {  
				for (let i=0; i < arr2.length; i++) {
					let temp = arr2[i].id;
					for (let j=0; j<brr.length; j++) {
						if (brr[j].id === temp) {
							brr.splice(j,1);
							break
						}
					}
				}
				return brr.concat(arr2);	
			},
            //学习阶段清除
			clearList(item, id, items) {
                this.clearLFn(item, id, items,this.addressee)
            },
            //本科编辑1
            editStudy(types){
				
                //点击此处时要走一次保存
                this.saveAll2()
				this.title = '编辑本科专业方向'
				this.show = true
				this.num = '3'
				//todo 要将本科数据过去
				this.listData = this.listData
				this.types = types
				
            },
            //专科2
            editCollege(types){
                //点击此处时要走一次保存
                this.saveAll2()
				this.title = '编辑专科专业方向'
				this.show = true
				this.num = '3'
				//todo 要将专科数据过去
				this.listData = this.skillData
				this.types = types

            },
            //专科加入
            addressListTransfer2(item,index){
                this.AddFn(item,index,this.workList)
                // let self = this
				// //左侧数据删除
				//  if(!this.fromDisabled){
				// 	 for(let i=0; i < this.workList.length; i++){
				// 		this.workList[i].move_up = true	
				// 	}
				// 	item.move_up = false
				// }
				// let arr =[]
				// let arr2 =[]
				// let childrens =[]
				// for(let k=0; k < this.fromData.length; k++){
				// 	for(let i=0; i < this.checkList.length; i++){
				// 		if( this.fromData[k].id == this.checkList[i]){						
				// 			arr.push(this.fromData[k])
				// 		}
				// 	}
				// }
				// for(let m =0; m < arr.length; m++){
				// 	//如果新建的没有子集children
				// 	if(this.workList[index].courseList == undefined){
				// 		this.workList[index].courseList = childrens
				// 	}
				// }
				// //新加功能是为了去掉左侧的重复id
				// this.workList[index].courseList = this.isModify(arr,this.workList[index].courseList)
				// this.checkList = []

            },
            //专科删除
            clearList2(item, id, items){
                this.clearLFn(item, id, items,this.workList)
			},
			//保存整个
			saveAll(){
				let self = this 
				let ARR = this.addressee.concat(this.workList)
				self.$http.post('/tes/direction/course',ARR).then((response) => {
                    let res = response.data
						if(res.code == '200') {
							self.$message({
								message: '保存成功',
								type: 'success',
							})
							self.init()
						}else{
							self.$message.error(res.message)
						}
						
					})
				.catch(err => {
					console.log(err)
				})
				
			},
			//假保存
			saveAll2(){
				let self = this 
				console.log(this.addressee,147)
				console.log(this.workList,589)
			
				let ARRs = this.addressee.concat(this.workList)
				self.$http.post('/tes/direction/course',ARRs).then((response) => {
                    let res = response.data
						if(res.code == '200') {

						}else{
							self.$message.error(res.message)
						}
						
					})
				.catch(err => {
					console.log(err)
				})
				
			},
            //关闭子组件的弹窗
			handleCloseBindWarn() {
				this.show = false
            },
            //子组件传来的数据
			close(n,val,NoSystemList,types){
				//n 子组件传来的值
				//NoSystemList 是接收值
				//types 是类型 本科
				let self = this
				const loading = self.$loading({
					lock: true,
					text: '正在保存中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				let typeValue;
				if(types == '1'){
					typeValue = self.tabFrist
					// self.$http.post('/tes/direction?type='+typeValue,NoSystemList).then(response => {
					// let res = response.data
					// 	if(res.code == '200') {
					// 		self.show = val
					// 		self.$message({
					// 			message: '保存成功',
					// 			type: 'success'
					// 		})
							
					// 		loading.close()
					// 		self.getData(self.tabFrist)
					// 		this.listData =[]
						
					// 	}else{
					// 		self.$message.error(res.message)
					// 		loading.close()
					// 	}
					// })
					// .catch(err => {
					// 	loading.close()
					// })
			
				}else if(types == '2'){
					typeValue = self.tabSecond
				}
				self.$http.post('/tes/direction?type='+typeValue,NoSystemList).then(response => {
					let res = response.data
					if(res.code == '200') {
						self.show = val
						self.$message({
							message: '保存成功',
							type: 'success'
						})
						loading.close()
						types == '1'? self.getData(self.tabFrist): self.getData( self.tabSecond)
						
						this.skillData =[]
						this.listData =[]
					}else{
						self.$message.error(res.message)
						loading.close()
					}
				})
				.catch(err => {
					loading.close()
				})

			},
        }
    }
</script>
<style scoped>
.day_class {
	margin-bottom: 500px;
}
.active{
	display: block
}
.active2{
	display: none
}
.el-dialog__wrapper>>>.el-dialog__body{
	padding: 30px 50px;
}
.el-input{
	display: inline;
}
.el-input>>>.el-input__inner{
	width: 280px;
}
 .el-checkbox>>>.el-checkbox__label{
	/* overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 295px;
	display: inline-block */
}
.el-checkbox>>>.el-checkbox__input{
	vertical-align: 1px;
}
.el-checkbox>>>.el-checkbox__inner{
	vertical-align: -4px;
}

.el-tabs--card>>>.el-tabs__item{
	width: 200px;
}
.el-button--primary{
	background-color:transparent;
	border-color:#d9d9d9;
	color: #999;
}
.el-button--primary.is-disabled{
	color: #999;
	background-color:transparent;
	border-color:#d9d9d9;
}
.el-button--primary{
	/* background-color:transparent;
	color: #1276eb; */

	color: #999;
}
 .block::-webkit-scrollbar{
	width: 2px;
}
.block::-webkit-scrollbar-thumb {
	background: #dededd;
	border-radius:50px;
}
.block{
	overflow-y: scroll;
	max-height: 430px;
}
 .blocks::-webkit-scrollbar{
	width: 2px;
}
.blocks::-webkit-scrollbar-thumb {
	background: #dededd;
	border-radius:50px;
}
.blocks{
	overflow-y: scroll;
	max-height: 470px;
}

</style>
<style lang="scss" scoped>
.jx-content{
		margin-top: 30px;
		overflow: hidden;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
    }
	.empty-systerm-img{
		clear: both;
		text-align: center;
		padding: 100px 0 300px 120px
	}
	.student-empty-systerm-img{
		clear: both;
		text-align: center;
		padding: 200px 0 300px 0px
	}
      .systemList-course{
            max-width: 910px;
            margin: 20px auto;
            overflow: hidden;
            .systemLeft{
                width: 400px;
                height: 590px;
                border: 1px solid #ebeef5;
                border-radius: 3px;
                position: relative;

            }
            .systemMiddle{
                width: 105px;
                line-height: 590px;
                height: 590px;
                text-align: center;
                i{
                    font-size: 26px;
                    color: #c9c9c9;
                }
            }
            .systemRight{
                width: 400px;
                height: 590px;
                border: 1px solid #ebeef5;
                border-radius: 3px;
                position: relative;
            }

        }
        .save{
            margin: 40px auto;
            width: 67px;
            clear: both;
        }
        .navBoxs{
            background: #fafafa;
            height:40px;
            line-height: 40px;
			display: flex;
            span{
                display: inline-block;
                height: 40px;
                width: 400px;
                text-align: center;
                border-bottom: 1px solid #ebeef5;
            }
            .templateCheck{
                background: #1277eb;
                color: #fff;
                cursor: pointer;
            }
            .reportTemplate{
                cursor: pointer;
            }
        }
        .transfer-main {
            padding: 0px 18px;
			.address-list-ul{
				padding-left: 6px;
			}
        }
        .transfer-left {
            padding: 25px 0px;
        }
        .transfer-right {
            padding: 20px 10px;
        }
        .edit{
            position: absolute;
            bottom: 14px;
            right: 25px;
            font-size: 20px;
			cursor: pointer;
			&:hover{
				color: #4c9ffe;
			}

        }
        .icon-icon_edit{
            color: #1277eb;
			font-size: 20px;
			&:hover{
				color: #4c9ffe;
			}
        }
        .el-button.is-circle{
            padding:3px 5px;
            border-radius:4px;
        }
        .titleIcon{
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: bottom;
        }
        .transfer-title{
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            //color: #1276eb;
            font-size: 14px;
			&:hover{
				color: #1276eb;
				cursor: pointer;
				.el-button--primary{
					color: #1276eb;
					border-color:#1276eb;
				}
				.el-button--primary.is-disabled{
					border-color:#d9d9d9;
					color: #999;
				}
				i{
					color: #1276eb;
				}
			}
        }
		
        .filescourse{
            vertical-align: 1px;
            margin-right: 2px;
        }
         .move_up_img {
            float: right;
            cursor: pointer;

        }
        .address-list-li {
            position: relative;
            padding: 6px 10px 6px 4px;
            border-radius: 3px;
            line-height: 25px;
            height: 25px;
            overflow: hidden;
            cursor: pointer;
            white-space: nowrap;
            text-overflow: ellipsis;
			label{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 290px;
				display: inline-block;
			}
            img{
                vertical-align: baseline
            }

        }
        .address-list-li:hover {
            background-color: #f5f7fa;
        }
        .address-list-li:hover .address-list-del {
            display: block;
        }
         .address-list-del {
            display: none;
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -6px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-style:normal;
            text-align: center;
            color: #727272;
            cursor: pointer;
        }
        .icon-shouqi ,.icon-xiala-copy{
            font-size: 20px;
            margin-top: 6px;
            height: 25px;
			color: #cccccc;
        }
		.checkboxlist{
			height: 33px;
			line-height: 33px;
			.hoverCalss{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 300px;
				display: inline-block;
				vertical-align: bottom;
			}

		}
		.button-dark{
			background: #8c8d90d6;
			color: #fff;
			cursor: pointer;
			height: 32px;
			line-height: 32px;
			border-radius: 3px;
			width: 52px;
			margin-left: 4px;
			margin-top: -2px;
		}
		.button-dark{
			background: #8c8d90d6;
			color: #fff;
			cursor: pointer;
			height: 32px;
			line-height: 32px;
			border-radius: 3px;
			width: 52px;
			margin-left: 4px;
			margin-top: -2px;
		}
		.button-save{
			background: #1277eb;
			color: #fff;
			cursor: pointer;
			height: 32px;
			line-height: 32px;
			border-radius: 3px;
			width: 52px;
			margin-left: 4px;
			margin-top: -2px;
		}
		.emptylist{
			margin:  160px auto;
			text-align: center;
			&>p{
				line-height: 26px;
				color: #999999;
			}
			&>img{
				margin-bottom: 8px;
			}
		}
    
</style>